<template>
  <!-- 推荐上架 -->
  <div id="ShelfRecommended">
    <root name="ShelfRecommended">
      <SafeHeader
        v-bind="{
          title: '推荐上架',
          isBack: true,
          fixedTop: true,
        }"
      />
      <div class="shelfRecommended_wrap">
        <v-container class="px-2">
          <v-card outlined class="py-3">
            <v-row class="ma-0 mt-2">
              <!-- <v-col
                cols="12"
                class="py-0 d-flex align-center font-weight-bold"
                style="font-size: 15px"
                >目标库位</v-col
              >-->
              <v-col cols="12" class="py-1">
                <v-text-field
                  id="billNo"
                  label="单据编码"
                  outlined
                  autofocus
                  class="inputPlaceholder"
                  @keydown.13="scanGenerateBill"
                  clearable
                  v-model="billNo"
                  hide-details
                  placeholder="请扫描或者输入单据编码"
                ></v-text-field>
              </v-col>
            </v-row>
            <v-row class="ma-0">
              <!-- <v-col
                class="py-0 d-flex align-center font-weight-bold"
                style="font-size: 15px"
              >
                容器
              </v-col>-->
              <v-col cols="12" class="py-1">
                <v-text-field
                  id="ctCode"
                  label="托盘码"
                  @keydown.13="scanGenerateCode"
                  class="my-0 inputPlaceholder"
                  outlined
                  clearable
                  v-model.trim="ctCode"
                  hide-details
                  placeholder="请扫描或者输入托盘码"
                ></v-text-field>
              </v-col>
            </v-row>
            <v-row class="ma-0 mt-2">
              <!-- <v-col
                cols="12"
                class="py-0 d-flex align-center font-weight-bold"
                style="font-size: 15px"
                >目标库位</v-col
              >-->
              <v-col cols="12" class="py-1">
                <v-text-field
                  id="targetWorkCellCode"
                  label="目标库位"
                  outlined
                  class="inputPlaceholder"
                  @keydown.13="scanCellCode"
                  clearable
                  v-model="targetWorkCellCode"
                  hide-details
                  placeholder="请扫描或者输入目标库位"
                ></v-text-field>
              </v-col>
            </v-row>
            <!-- <v-row class="ma-0">
              <v-col cols="12" class="py-1">
                <v-text-field
                  label="单据编码"
                  @keydown.13="scanGenerateCode"
                  class="my-0 inputPlaceholder"
                  outlined
                  autofocus

                  clearable
                  v-model="billNo"
                  hide-details
                  placeholder="请输入单据编码"
                ></v-text-field>
              </v-col>
            </v-row>-->
          </v-card>
        </v-container>

        <v-container v-if="isSupplier" class="px-0 shelfRecommended_select" style="flex: 1">
          <!--          <v-row v-for="item in supplierList" :key="item.supplierId">-->
          <div style="margin-left: 10px">
            供应商:
            <v-select
              filterable
              v-model="supplierId"
              :items="supplierList"
              item-text="supplierName"
              item-value="supplierId"
            ></v-select>
          </div>
          <!--            {{item.supplierId}}-->
          <div style="margin-left: 10px">
            部门:
            <v-select
              filterable
              v-model="deptId"
              :items="deptList"
              item-text="deptName"
              item-value="deptId"
            ></v-select>

            <!--            <v-treeview-->
            <!--              class="treeview_dept"-->
            <!--              activatable-->
            <!--              :active.sync="active"-->
            <!--              v-model="deptId"-->
            <!--              :items="deptList"-->
            <!--              item-text="deptName"-->
            <!--              item-key="deptId"-->
            <!--            ></v-treeview>-->
          </div>
        </v-container>

        <v-container class="px-0 shelfRecommended_select" style="flex: 1">
          <!-- <v-card outlined class="py-3 d-flex flex-column">
            <v-row class="ma-0" style="max-height: 32px">
              <v-col span="12" class="py-1 shelfRecommended_select_title"
                >推荐上架库位列表</v-col
              >
            </v-row>
            <v-divider class="my-2 mx-3"></v-divider>
            <v-row class="ma-0 px-4 py-1">
              <v-col class="shelfRecommended_select_content">
                <v-radio-group
                  v-model="targetWorkCellCode"
                  column
                  hide-details
                  disabled
                  v-if="tableData1.length > 0"
                >
                  <v-radio
                    :label="item.cellName"
                    color="#193690"
                    :value="item.cellCode"
                    v-for="(item, index) in tableData1"
                    :key="index"
                  ></v-radio>
                </v-radio-group>
              </v-col>
            </v-row>
          </v-card>-->
          <v-data-table
            no-data-text="暂无数据"
            hide-default-footer
            :headers="headers"
            :items="tableData1"
            disable-sort
            fixed-header
            item-key="id"
            single-select
            height="300"
            light
            class="shelfRecommended_table"
            mobile-breakpoint="0"
            :loading="loading"
            loading-text="Loading... Please wait"
          >
            <!-- <template v-slot:top>
              <v-row class="ma-0">
                <v-col
                  cols="12"
                  style="font-size: 15px"
                  class="py-1 d-flex align-center font-weight-bold"
                  >推荐上架库位列表</v-col
                >
              </v-row>
              <v-divider class="ma-1"></v-divider>
            </template>-->
          </v-data-table>
        </v-container>
        <div v-show="hidshow" class="footer">
          <v-bottom-navigation>
            <v-row class="ma-0 pa-2">
              <v-col class="pa-0">
                <v-btn
                  block
                  color="#193690"
                  dark
                  style="height: 100%; border-radius: 10px"
                  @click="acc"
                >
                  <span style="color: #fff; font-size: 15px" class="font-weight-bold">提交</span>
                </v-btn>
              </v-col>
            </v-row>
          </v-bottom-navigation>
        </div>
      </div>
    </root>
    <v-overlay :value="overlay">
      <v-progress-circular indeterminate size="64"></v-progress-circular>
    </v-overlay>
  </div>
</template>

<script>
import Root from "@/components/Root.vue";
import SafeHeader from "../../components/safeHeader_wms";
// import Message from "@/components/message_box_wms/index";
// import Storage from "@/utils/storage.js";
import wms from "@/utils/business_wms";

// import { apiList } from "@/static/apiList";
function debounce(fn, delay) {
  let timer = null;
  return function() {
    // eslint-disable-next-line prefer-rest-params
    let arg = arguments;

    clearTimeout(timer);

    timer = setTimeout(() => {
      fn.apply(this, arg);
    }, delay);
  };
}

export default {
  name: "ShelfRecommended",
  components: {
    SafeHeader,
    Root
  },
  data() {
    return {
      deptId: "",
      supplierId: "",
      docmHeight: document.documentElement.clientHeight,
      showHeight: document.documentElement.clientHeight,
      isSupplier: false,
      hidshow: true,
      overlay: false,
      loading: false,
      supplierList: [],
      headers: [
        {
          text: "收货单号",
          value: "billNo",
          align: "center",
          class: "shelfRecommended_table_header"
        },
        {
          text: "物料编码",
          align: "center",
          value: "itemCode",
          class: "shelfRecommended_table_header"
        },
        {
          text: "物料名称",
          align: "center",
          value: "itemName",
          class: "shelfRecommended_table_header"
        },
        {
          text: "数量",
          align: "center",
          value: "quantity",
          class: "shelfRecommended_table_header"
        },
        {
          text: "辅助属性",
          align: "center",
          value: "asnStockName",
          class: "shelfRecommended_table_header"
        }
      ],
      tableData1: [],
      deptList: [],
      inventories: [
        // {
        //   id: "1",
        //   cellCode: "TL_CCQ1-02-01-01",
        //   cellName: "TL_CCQ1-02-01-01",
        // },
        // {
        //   id: "2",
        //   cellCode: "TL_CCQ1-02-01-02",
        //   cellName: "TL_CCQ1-02-01-02",
        // },
      ],
      ctCode: "", // 扫描框容器编码
      targetWorkCellCode: "", // 扫描库位编码
      billNo: "", // 单据编码
      timer: null,
      vm: this,
      active: []
    };
  },
  watch: {
    // ctCode: function(val) {
    //   this.supplierId = "";
    //   this.isSupplier = false;
    //   wms
    //     .get({
    //       url: "/transfer/packwork/findByCode",
    //       data: { code: val }
    //     })
    //     .then(res => {
    //       if (res.status === 200 && res.data.code === 200) {
    //         if (res.data.data.asnType === 10 || res.data.data.asnType === 29) {
    //           this.isSupplier = true;
    //           this.supplierId = res.data.data.supplierId;
    //         }
    //         console.log(res, "res");
    //         console.log(this.supplierId, "this.supplierId");
    //       } else {
    //         this.overlay = false;
    //         alert(res.data.message);
    //       }
    //     });
    //   console.log(val);
    // },

    showHeight: function() {
      if (this.docmHeight > this.showHeight) {
        this.hidshow = false;
      } else {
        this.hidshow = true;
      }
    }
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.showHeight = document.body.clientHeight;
      })();
    };
    //初始化供应商
    this.initSupplier();
    //初始化部门
    this.initDept();
    // 获取装箱打标页面提交的参数
    this.ctCode = this.$root.api.api.pageParam.ctCode;
    this.billNo = this.$root.api.api.pageParam.billNo;
    this.scanGenerateBill();
    // if (!this.ctCode && !this.billNo) {
    //   //调用查询库存的方法
    //   this.scanGenerateBill();
    // }
  },
  methods: {
    //获取部门
    initDept() {
      wms
        .get({
          url: "/depts/treeDept/0"
        })
        .then(res => {
          if (res.status == 200 && res.data.code == 200) {
            console.log(res);
            this.deptList = res.data.data;
            console.log(this.deptList, "this.deptList");
          } else {
            this.overlay = false;
            // alert(res.data.message);
          }
        });
    },

    //获取供应商
    initSupplier() {
      wms
        .get({
          url: "/supplier/manages/allList"
        })
        .then(res => {
          if (res.status == 200 && res.data.code == 200) {
            this.supplierList = res.data.data;
            console.log(this.supplierList);
          } else {
            this.overlay = false;
          }
        });
    },

    //提交方法
    acc() {
      console.log(this.active[0], "this.active");
      console.log(this.supplierId, "this.active");
      //校验
      if (!this.ctCode) {
        alert("请填写托盘码!!!!!");
        return false;
      } else if (!this.targetWorkCellCode) {
        alert("请填写库位!!!!!");
        return false;
      } else if (!this.billNo) {
        alert("请填写单号!!!!!");
        return false;
      }
      // 判断在有供应商选择的情况下 没选择部门不能提交
      if (this.isSupplier) {
        if (!this.deptId) {
          alert("请选择相关的部门!!!!!");
          return false;
        }
      }
      // 如果没有查到库位，不可以提交
      if (this.inventories.length < 1) {
        alert("没有数据无法提交!!!!!");
        return false;
      }
      //暂时只支持一次只提交一个库位
      let upperData = {
        wareId: localStorage.getItem("wareId"),
        supplierId: this.supplierId,
        deptId: this.deptId,
        boxCode: this.ctCode,
        inventories: this.inventories, // 库存明细
        cellCode: this.targetWorkCellCode
      };
      this.overlay = true;
      wms
        .post({
          url: "/transfer/create/upperAsn",
          data: upperData
        })
        .then(res => {
          if (res.status === 200 && res.data.code === 200) {
            alert("上架成功");
            //提示提交成功
            this.overlay = false;
            window.location.reload();
          } else {
            this.overlay = false;
            alert(res.data.message);
          }

          console.log(res);
        });
    },
    // 扫描单据号 查询库存信息
    scanGenerateBill() {
      if (!this.ctCode) {
        // 不处理
      } else {
        // 利用容器号和单据号去查库存
        wms
          .get({
            url: "/transfer/findByboxCode",
            data: {
              boxCode: this.ctCode,
              billNo: this.billNo
            }
          })
          .then(res => {
            if (res.status == 200 && res.data.code == 200) {
              this.tableData1 = [];

              console.log(JSON.stringify(res.data));
              let recCells = res.data.data;
              this.inventories = recCells;
              console.log(recCells.length);
              for (let index = 0; index < recCells.length; index++) {
                let cellInfo = {};
                cellInfo.billNo = recCells[index].asnBillNo;
                cellInfo.itemCode = recCells[index].itemCode;
                cellInfo.itemName = recCells[index].itemName;
                cellInfo.quantity = recCells[index].quantity;
                if (recCells[index].asnStockName == "VMI待检仓") {
                  cellInfo.asnStockName = "VMI";
                } else {
                  cellInfo.asnStockName = recCells[index].asnStockName;
                }
                this.tableData1.push(cellInfo);
              }

              this.ctCode;
              document.getElementById("targetWorkCellCode").focus();
              this.overlay = false;
            } else {
              this.overlay = false;
              alert(res.data.message);
            }
          });
      }
      // // 判断是否要显示供应商按钮
      // this.supplierId = "";
      // this.isSupplier = false;
      // wms
      //   .get({
      //     url: "/transfer/packwork/findByCode",
      //     data: { billNo: this.billNo }
      //   })
      //   .then(res => {
      //     if (res.status === 200 && res.data.code === 200) {
      //       if (res.data.data.asnType === 10 || res.data.data.asnType === 29) {
      //         this.isSupplier = true;
      //         this.supplierId = res.data.data.supplierId;
      //       }
      //       console.log(res, "res");
      //       console.log(this.supplierId, "this.supplierId");
      //     } else {
      //       this.overlay = false;
      //       alert(res.data.message);
      //     }
      //   });

      document.getElementById("ctCode").focus();
    },
    // 扫描容器，查询库存信息  123
    scanGenerateCode() {
      //遮罩
      // this.overlay = true;

      if (!this.billNo) {
        // 不处理
      } else {
        // 利用容器号和单据号去查库存
        wms
          .get({
            url: "/transfer/findByboxCode",
            data: {
              boxCode: this.ctCode,
              billNo: this.billNo
            }
          })
          .then(res => {
            if (res.status == 200 && res.data.code == 200) {
              this.tableData1 = [];
              console.log(JSON.stringify(res.data));
              let recCells = res.data.data;
              console.log(recCells.length);
              // 库存明细
              this.inventories = recCells;
              for (let index = 0; index < recCells.length; index++) {
                let cellInfo = {};
                cellInfo.billNo = recCells[index].asnBillNo;
                cellInfo.itemCode = recCells[index].itemCode;
                cellInfo.itemName = recCells[index].itemName;
                cellInfo.quantity = recCells[index].quantity;
                cellInfo.asnStockId = recCells[index].asnStockId;
                this.tableData1.push(cellInfo);
              }
              this.ctCode;
              this.overlay = false;
            } else {
              this.overlay = false;
              alert(res.data.message);
            }
          });
      }
      document.getElementById("targetWorkCellCode").focus();

      // 传递到后台，后台给出推荐的库位
      // wms
      //   .get({
      //     url: "/transfer/upper/recommend",
      //     data: { boxCode: this.ctCode }
      //   })
      //   .then(res => {
      //     if (res.status == 200 && res.data.code == 200) {
      //       console.log(JSON.stringify(res.data));
      //       let recCells = res.data.data;
      //       console.log(recCells.length);
      //       for (let index = 0; index < recCells.length; index++) {
      //         let cellInfo = {};
      //         cellInfo.id = recCells[index].cellId;
      //         cellInfo.cellCode = recCells[index].cellCode;
      //         cellInfo.cellName = recCells[index].cellName;
      //         cellInfo.boxNum = recCells[index].boxNum;
      //         this.inventories.push(cellInfo);
      //       }

      //       this.tableData1 = this.inventories;
      //       this.ctCode;
      //       document.getElementById("targetWorkCellCode").focus();
      //       this.overlay = false;
      //     } else {
      //       this.overlay = false;
      //       alert(res.data.message);
      //     }
      //   });
    },
    // 扫描库位编码
    scanCellCode() {
      if (!this.ctCode || !this.billNo) {
        alert("请先扫描容器和单据号!");
        this.targetWorkCellCode = "";
        return false;
      }
    }
    // handleSelect(e) {
    //   this.targetWorkCellCode = e.item.cellCode;
    //   console.log(e.item.cellCode);
    // },
    // handleCellChange(e) {
    //   console.log(e);
    //   // let that = this;
    //   if (e) this.searchCellList(e);
    // },
    // 查询库位列表中有没有相同的
    //   searchCellList(e) {
    //     let cellInTable;
    //     this.inventories.forEach((item, index) => {
    //       if (item.cellCode === e) {
    //         cellInTable = index;
    //       }
    //     });
    //   }
  }
};
</script>

<style lang="scss" scoped>
.footer {
  position: absolute;
  padding-top: 65px;
  width: 100%;
  bottom: 0;
}
</style>

<style lang="sass" scoped>
.scanContainer
  >.row
    margin: 0
    padding: 10px

.shelfRecommended_table
  ::v-deep .v-data-table__mobile-table-row
    margin: 4px 8px
    background-color: #e8e8e8f1
  ::v-deep .v-data-table__mobile-row
    min-height: 28px !important
    // 暂无数据的显示
    ::v-deep .v-data-table__empty-wrapper
      display: flex
      justify-content: center
      align-items: center
      td
        line-height: 48px
  ::v-deep .shelfRecommended_table_header
    width: 80px
    font-size: 10px !important
    padding: 0 2px
.inputPlaceholder
  ::v-deep.v-text-field__slot
    input::-webkit-input-placeholder
      font-size: 10px
    input::-moz-placeholder
      font-size: 10px
    input:-moz-placeholder
      font-size: 10px
    input:-ms-input-placeholder
      font-size: 10px
.treeview_dept
  height: 120px
  overflow-y: scroll
.shelfRecommended_wrap
  height: 100%
  display: flex
  flex-direction: column
  justify-content: space-between
.shelfRecommended_select
  height: 100%
  max-height: 400px
  .shelfRecommended_select_title
    font-size: 15px
    font-weight: bold
  .v-card
    height: 100%
  // background-color: #fff
  .shelfRecommended_select_content
    flex: 1
    max-height: 300px
    overflow: auto
    border-radius: 8px
    background-color: #f2f3f5
    border: 1px solid #dcdcde
    .v-input--radio-group--column .v-radio:not(:last-child):not(:only-child)
      margin-bottom: 12px
    .v-input--selection-controls
      margin-top: 0
    ::v-deep .v-radio
      display: flex
      align-items: center
      flex-wrap: nowrap
      .v-input--selection-controls__input
        height: 32px
        width: 32px
      .v-icon__svg
        height: 30px
        width: 30px
      .v-label
        font-size: 18px
</style>
